<template>
  <div id="doProblem">
    <header>
      <i @click="goBack()"></i>
      <div v-show='isCount'>倒计时
        <count-down :callback="callback" endText="答题结束"></count-down>
      </div>
      <div v-show='!isCount'>
        查看错题
      </div>
    </header>
    <div class="border-8"></div>
    <div class="swiper-container swipe" id="outSwiper">
      <div class="swiper-wrapper">
        <div class='mc' v-if="list.length<1">
          <div>
            <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
            <p>暂无数据!</p>
          </div>

        </div>
        <div class="swiper-slide" v-for="(item,index) in list" :key="index">
          <div class="problem">
            <h3>{{index+1}}.{{item.name}}</h3>
            <img :src="item.pic" alt="">
            <label @change="judgeAnswer(0,index)">
              <input type="radio" v-model="gender[index]" value="A" :disabled="$route.query.wrongList?true: (gender[index]?true:false)" />
              <span>A
                <i :class="$route.query.wrongList?(item.user_answer=='A'?'wrong':item.answer=='A'?'right': ''):''"></i>
              </span>{{item.a}}
            </label>
            <label @change="judgeAnswer(1,index)">
              <input type="radio" v-model="gender[index]" value="B" :disabled="$route.query.wrongList?true: (gender[index]?true:false)" />
              <span>B
                <i :class="$route.query.wrongList?(item.user_answer=='B'?'wrong': item.answer == 'B'? 'right': ''):''"></i>
              </span>{{item.b}}
            </label>
            <label @change="judgeAnswer(2,index)">
              <input type="radio" v-model="gender[index]" value="C" :disabled="$route.query.wrongList?true: (gender[index]?true:false)" />
              <span>C
                <i :class="$route.query.wrongList?(item.user_answer=='C'?'wrong': item.answer == 'C'? 'right': ''):''"></i>
              </span>{{item.c}}
            </label>
            <label @change="judgeAnswer(3,index)">
              <input type="radio" v-model="gender[index]" value="D" :disabled="$route.query.wrongList?true: (gender[index]?true:false)" />
              <span>D
                <i :class="$route.query.wrongList?(item.user_answer=='D'?'wrong': item.answer == 'D'? 'right': ''):''"></i>
              </span>{{item.d}}
            </label>
          </div>
          <div class="border-8"></div>
          <div class="detailAnswer" v-show="isShow[index]">
            <h3>试题详解</h3>
            <div>正确答案: <b>{{item.answer}}</b></div>
            <div class="gray">
              {{item.resolution}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer" @click="isShowList=true" v-if="!$route.query.wrongList">
      <div class="send">交卷</div>
      <div class="rightNum">{{rightNum}}</div>
      <div class="wrongNum">{{wrongNum}}</div>
      <div class="answerProgress">{{answerNum}}<i>/{{allNum}}</i></div>
    </div>
    <div class="proListBox" v-show="isShowList" @click.stop="isShowList=false">
      <div class="proList" @click.stop="isShowList=true">
        <div class="footer">
          <div class="send" @click="sureSend()">交卷</div>
          <div class="rightNum">{{rightNum}}</div>
          <div class="wrongNum">{{wrongNum}}</div>
          <div class="answerProgress">{{answerNum}}<i>/{{allNum}}</i></div>
        </div>
        <ul>
          <li v-for='(item,index) in list' :key="index">{{index+1}}</li>
        </ul>
      </div>
      <div class='confirmBox' v-show="isShowToast" @click.stop="isShowToast = false">
        <div>
          <img class="message" src="../../image/icon_inform.png" width="100" height="" alt="">
          <img class="close" src="../../image/closed_inform.png" width="28" height="" alt="" @click.stop="isShowToast = false">
          <div>
            <p>您已做<i> {{answerNum}} </i>道题,</p>
            <p>时间还剩余<i>
                <count-down :callback="callback" endText="答题结束"></count-down>
              </i>分钟</p>
            <div>
              <a class="sendNow" @click="sendAnswer()">现在交卷</a>
              <a>继续做题</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import countDown from '../../components/countDown.vue'
  export default {
    data() {
      return {
        list: [],
        // time: 15,		//倒计时
        gender: [], //单选
        isShow: [], //试题解析的显示隐藏
        rightNum: 0,
        wrongNum: 0,
        wrongList: [], //错题数组
        answerNum: 0,
        allNum: 0, //试题总数
        rightAnswer: [0, 3, 1],
        answerList: ['A', 'B', 'C', 'D'],
        isShowList: false, //底部答卷
        isShowToast: false, //交卷时提示框
        mySwiper: '',
        isCount: true, //是否显示倒计时 做题时显示 查看错题时不显示
      }
    },
    components: {
      'count-down': countDown
    },
    methods: {
      goBack() {
        this.$router.push({
          path: '/dailyProblem'
        })
      },
           // 登录拦截
           isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push('/login1')
          return false;
        } else {
          return true;
        }
      },
      //根据题目类型获取10道题
      getProblem() {
        if (this.$route.query.wrongList) { //如果是从查看错题过来
          this.isCount = false;
          const typeid = this.$route.query.typeid;
          const wrongList = this.$route.query.wrongList;
          this.list = JSON.parse(wrongList);
          var _this = this;
          $('.swiper-slide').find('input[type="radio"]').attr('disabled', true);
          this.list.forEach(function (item, index) { //显示解析
            _this.isShow.push(true);
            _this.gender.push(item.user_answer);
          });
        } else {
          this.isCount = true;
          const typeid = this.$route.query.typeid;
          this.$api.get(this.$api.baseURLSchool, "selectdata2/test_sub?typeid=" + typeid, {}, r => {
            if (r.data.ret == 1) {
              this.list = r.data.info;
              this.allNum = this.list.length; //试题总数
              this.hideDetail();
            }
            if (r.data.ret == -3) {
              localStorage.clear();
              this.isLogin()
            }
            // if(this.list.length==0){
            //     this.isCount = false;
            // }
          }, err => {
            console.log(err);
          })
        }

      },
      //倒计时时间到的回调
      callback() {
        this.$utils._toast("答题结束");
      },
      // 开始隐藏所有试题详解 所有试题默认选中为空
      hideDetail() {
        var _this = this;
        this.list.forEach(function () {
          _this.isShow.push(false);
          _this.gender.push('');
        });
      },
      judgeAnswer(x, index) {
        // 如果答完题，该页单选禁用，显示试题详解
        if (this.gender[index]) {
          this.answerNum += 1;
          //存用户选的答案
          var _this = this;
          this.list[index].user_answer = this.gender[index];

          this.isShow.forEach(function (val, i) {
            if (i == index) {
              _this.$set(_this.isShow, i, true);
            }
          });
          if (this.gender[index] == this.list[index].answer) { //答题正确
            this.rightNum += 1;
            $('.swiper-slide').eq(index).find('label i').eq(x).addClass('right');
            $('.proListBox ul li').eq(index).addClass('right');
            var _this = this;
            setTimeout(() => {
              _this.mySwiper.slideTo(index + 1);
            }, 300);
          } else { //答题错误
            this.wrongList.push(this.list[index]);
            this.wrongNum += 1;
            $('.proListBox ul li').eq(index).addClass('wrong');
            $('.swiper-slide').eq(index).find('label input:checked').next().find('i').addClass('wrong');

            var that = this;
            this.answerList.forEach(function (item, i) {
              if (that.list[index].answer == that.answerList[i]) {
                $('.swiper-slide').eq(index).find('label i').eq(i).addClass('right');
              }
            });

          }
        }
      },
      // 点击交卷显示confirm框
      sureSend() {
        this.isShowToast = true;
      },
      // confirm框中点击现在交卷 跳到成绩页面
      sendAnswer() {
        const typeid = this.$route.query.typeid;
        const data = {
          userid: localStorage.getItem("loginMobile"),
          typeid: typeid,
          user_answer: JSON.stringify(this.list),
          answer: JSON.stringify(this.list),
        };
        this.$api.post(this.$api.baseURLSchool, "updatedata/test_user/add", data, r => {}, err => {
          console.log(err);
        })
        this.$router.push({
          path: "/testScores",
          query: {
            typeid: this.$route.query.typeid,
            rightNum: this.rightNum,
            wrongNum: this.wrongNum,
            wrongList: JSON.stringify(this.wrongList)
          }
        });
      }
    },
    created() {
      this.getProblem();
    },
    mounted() {
      this.mySwiper = new Swiper('#outSwiper', {
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        onSlideChangeStart: function (swiper) {
          var index = swiper.activeIndex;
        }
      });


    }
  }

</script>
<style lang="scss" scoped>
  #doProblem .swipe .problem {
    height: auto;

    img {
      width: 100%;
      height: 200px;
      margin: 4px;
    }
  }


  .mc {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    img {
      display: block;
      margin: 0 auto;
    }

    p {
      padding-top: 10px;
      text-align: center;
    }
  }

</style>
